<template>
    <view class="uni-shadow fohf-item" @tap.stop="detail">
        <view class="font-bold u-text-left name u-line-1" @longtap="longTap(fohfItem.name)">{{fohfItem.name}}</view>
        <view class="u-m-t-10 u-flex u-flex-wrap">
            <view v-for="(item,index) in fohfItem.list" :key="index" class="u-m-t-20 u-flex u-font-26 item">
                <text class="u-m-r-16 uni-dec-color">{{item.title}}</text>
                <text class="u-line-1" :style="{maxWidth:index==0||index==1?'80%':'60%'}" @longtap="longTap(item.value)">
                    {{item.value}}{{item.unit}}
                </text>
            </view>
        </view>
        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
export default {
    name: 'fohfItem',
    props:{
        listItem:{
            type: Object,
            default(){
                return {}
            }
        }
    },
    data(){
        return{
            fohfItem:{
                name: '专户名称', // zhmc
                list:[
                    { field:'xmmc', title:'项目名称', value:'加载中' },       
                    { field:'sgdwmc', title:'施工单位', value:'加载中' },
                    { field:'districtName', title:'属地名称', value:'加载中' },
                    { field:'xmtype', title:'项目类型', value:'加载中' },
                    { field:'khh', title:'开户行', value:'加载中' },
                    { field:'zhyeNew', title:'专户余额', value:'0',unit:'万元' },
                ]
            }
        }
    },

    created(){
        // 处理数据格式
        this.fohfItem.name = this.listItem.zhmc
        this.fohfItem.list.map((v,i)=>{
            if( v.field == 'zhyeNew' ){
                v.value = this.listItem[v.field]?this.listItem[v.field]:0
            }else{
                v.value = this.listItem[v.field]?this.listItem[v.field]:'暂无数据源'
            }
        })
    },

    methods: {
        // 长按事件
        longTap(value){
            this.$refs.uToast.show({ message: value })
        },
        // 专户详情
        detail(){
            uni.navigateTo({
                url: '/pages/fohf-bag/detail?id='+this.listItem.id
            })
        }
    },
}
</script>

<style scoped lang="scss">
    .fohf-item{
        .name{
            width: 100%;
        }
        .item{
            width: 50%;
        }
        .item:nth-child(1),.item:nth-child(2){
            width: 100%;
        }
    }
</style>